import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { YQPage } from 'components'

import YQoverview from './components/Overview'
import YQList from './components/List'
import YQserve from './components/Serve'

import styles from './api-manger-api-product-overview.less'

const Overview = ({ api_manger_api_product_overview, loading }) => {
  const { info, list } = api_manger_api_product_overview
  
  const overviewProps = {
    info,
  }

  const listProps = {
    dataSource: list,
    rowKey: "function_id",
    loading: loading.effects['api_manger_api_product_overview/query'],
  }

  return (
    <YQPage loading={loading.models.api_manger_api_product_overview} className={styles.overview}>
      <YQoverview {...overviewProps}/>
      <YQList {...listProps}/>
      <YQserve />
    </YQPage>
  )
}

Overview.propTypes = {
  api_manger_api_product_overview: PropTypes.object,
  loading: PropTypes.object,
}

export default connect(({ api_manger_api_product_overview, loading }) => ({ api_manger_api_product_overview, loading }))(Overview)